<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".step0").show();});
   sub.steps.push(function() {$(".step0").hide(); $(".step1").show();});

   wineman={};
   wineman.svg  = document.getElementsByTagName('svg')[0];
   wineman.pathMan = wineman.svg.getElementsByClassName('man')[0];
   wineman.pathHoofd = wineman.svg.getElementsByClassName('hoofd')[0];
   wineman.pathPain1 = wineman.svg.getElementsByClassName('pain1')[0];
   wineman.pathPain2 = wineman.svg.getElementsByClassName('pain2')[0];
   wineman.pathPain3 = wineman.svg.getElementsByClassName('pain3')[0];
   wineman.pathNo = wineman.svg.getElementsByClassName('no')[0];

   myman={};
   myman.angie = 1.57;
   myman.check=false;

   wineman.func = function(text,init) { 
       myman.arms=myman.angie > 2.35 ? 1 :0 ;
       myman.man=new iPath().Move(120,200).line(10, -50).smooth(0.1, 0, -10, -10, -10).line(-60, 0).store("heup").turtleBezier({a: myman.angie, r:50, cp1: {a: 0, r:5}, cp2: {a: -Math.PI/2, r: 15}})
    		.turtleLine({a:4*Math.PI/6-myman.angie, r:30}).turtleLine({a:-1*Math.PI/6, r:30}).line(0,15).line(-10,5).line(25,0).line(-10,-5).line(0,-15).bezier(10,0,10,-12,0,-12)
    		.line(15,-15).line(-35,0).line(15,15).line(-30,0).turtleLine({a:Math.PI/6,r:30}).turtleBezier({a:-Math.PI/6,r:40,cp1: {a:Math.PI/6, r:20}, cp2: {a:myman.angie-Math.PI/4, r: 15}})
    		.line(0, 1+(1-myman.arms) * 11).line(myman.arms * -30, myman.arms * 0).line(myman.arms * 10, myman.arms * 40).line(myman.arms * 10, myman.arms * 0)
                    .line(myman.arms * -5, myman.arms * -30).line(myman.arms * 15, myman.arms * 0).line2Label("heup", { x:-30,y:15}).line(80,0).line(-10,45);
       myman.hoofd=new iPath().bezier(20,0,20,-30,0,-30).smooth(1,-20,30,0,30);
       myman.pain= new iPath().line(-40,10).line(0,-20).line(40,10);
       myman.no = myman.check ? "M 40 50 a 90 90 0 1 0 100 0 a 90 90 0 0 0 -100 0 M 30 60 l 130 130"  : "";
    
       wineman.pathMan.setAttribute('d', evalPath("#{myman.man.dPath(3)}", false)); 
       wineman.pathHoofd.setAttribute('d', evalPath("M #{-15+myman.man.labels['heup'].location.x - Math.cos(myman.angie) * 80} #{myman.man.labels['heup'].location.y - Math.sin(myman.angie) * 80} #{myman.hoofd.dPath(3)}", false));
       wineman.pathPain1.setAttribute('d', evalPath("M #{-28+myman.man.labels['heup'].location.x} #{4+myman.man.labels['heup'].location.y} #{(myman.angie > 2.55) ? myman.pain.rotate(-0.4).dPath(3) :  ''}", false));
       wineman.pathPain2.setAttribute('d', evalPath("M #{-28+myman.man.labels['heup'].location.x} #{myman.man.labels['heup'].location.y - 1} #{(myman.angie > 2.55) ? myman.pain.rotate(0.5).scale(0.6).dPath(3) : ''}", false));
       wineman.pathPain3.setAttribute('d', evalPath("M #{-28+myman.man.labels['heup'].location.x} #{myman.man.labels['heup'].location.y - 6} #{(myman.angie > 2.55) ? myman.pain.rotate(0.9).scale(1.9).dPath(3) : ''}", false));
       wineman.pathNo.setAttribute('d', myman.no);
   };

buildInput('var:myman.angie, label:angle, defaultvalue:1.57, type:slider, max:3.14, min:1.57, step:0.005, size:3', {panelid: '#below', func:wineman.func});
buildInput('var:myman.check, label:No, defaultvalue:false, type:checkbox, max:6, min:0, step:0.05, size:3', {panelid: '#below', func:wineman.func});
wineman.func();

});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ol> 
<li class="">Where do you put your wine?<p class="step0 hide"><img src="images/wine-problem.jpg" height="400"/></p></li>
<li class="step0 hide">Not on your couch</li>
<li class="step1 hide">Watch out with the coffee table!
<div class="wineman container">
<div class="svg_border ">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="370"  width="400" baseProfile="full" viewbox="0 0 1000 1000"> 
<g stroke="red" stroke-width="20" fill="none" transform="scale(4)">
<path class="no"/>
</g>
<g stroke="black" stroke-width="1" fill="black" transform="scale(4)">
<path class="man"/>
<path class="hoofd"/>
<path class="pain1"/>
<path class="pain2"/>
<path class="pain3"/>
</g>
  </svg>
</div>
<div id="below">
</div>
</div>
</li>
</ol> 
</body> 
</html> 
